import React, { useEffect, useState } from 'react';

const MediaDevicesCheck = ({ children }) => {
  const [isCompatible, setIsCompatible] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    try {
      // 检查是否在安全上下文中（HTTPS或localhost）
      const isSecureContext = window.isSecureContext || 
                            window.location.hostname === 'localhost' || 
                            window.location.hostname === '127.0.0.1';
      console.log(navigator);
      
      // 检查浏览器是否支持mediaDevices API
      if (typeof navigator === 'undefined' || !navigator.mediaDevices) {
        console.error("浏览器不支持mediaDevices API");
        setIsCompatible(false);
        
        if (!isSecureContext) {
          setError("您正在使用非安全连接(HTTP)访问。语音功能需要安全连接(HTTPS)或本地开发环境(localhost)。");
        } else {
          setError("您的浏览器不支持音频功能，请使用Chrome、Firefox或Safari等现代浏览器");
        }
        return;
      }
      
      // 检查getUserMedia支持
      const hasGetUserMedia = !!(navigator.mediaDevices && 
                              navigator.mediaDevices.getUserMedia);
                              console.log(hasGetUserMedia);
                              
      
      if (!hasGetUserMedia) {
        console.error("浏览器不支持getUserMedia");
        setIsCompatible(false);
        setError("您的浏览器不支持音频功能，请使用Chrome、Firefox或Safari等现代浏览器");
        return;
      }
      
      // 一切正常
      setIsCompatible(true);
    } catch (e) {
      console.error("检查媒体设备时出错:", e);
      setIsCompatible(false);
      setError(`检查浏览器兼容性时出错: ${e.message}`);
    }
  }, []);

  if (isCompatible === null) {
    // 加载中
    return <div style={{ textAlign: 'center', padding: '20px' }}>检查浏览器兼容性...</div>;
  }

  if (isCompatible === false) {
    // 不兼容
    return (
      <div style={{
        padding: '20px',
        margin: '20px auto',
        maxWidth: '600px',
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
        textAlign: 'center'
      }}>
        <h2 style={{color: '#e74c3c'}}>浏览器兼容性问题</h2>
        <p>{error || '您的浏览器可能不支持语音功能'}</p>
        <div style={{ marginTop: '20px' }}>
          <h3>解决方案：</h3>
          <ul style={{textAlign: 'left', lineHeight: '1.6', margin: '20px 0'}}>
            <li>使用<strong>Chrome</strong>、<strong>Firefox</strong>或<strong>Safari</strong>等现代浏览器</li>
            <li>使用<strong>localhost</strong>访问而不是IP地址（如 <code>http://localhost:5173</code>）</li>
            <li>或者使用<strong>HTTPS</strong>访问（麦克风访问需要安全上下文）</li>
            <li>确保已授予麦克风访问权限</li>
          </ul>
        </div>
        <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'center', gap: '10px' }}>
          <button 
            onClick={() => window.location.reload()} 
            style={{
              padding: '8px 16px',
              backgroundColor: '#3498db',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '16px'
            }}
          >
            刷新页面
          </button>
        </div>
      </div>
    );
  }

  // 兼容，渲染子组件
  return children;
};

export default MediaDevicesCheck; 